<template>
  <div class="lix-edit">
    <div class="lix-edit__container">
      <LixCell label="选择生日" :value="timeData" @tap="showTimePicker"></LixCell>
      <button @click="submit">保存</button>
    </div>
    <mpvue-picker ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault" @onChange="onChange" @onConfirm="onConfirm" @onCancle="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
  </div>
</template>

<script>
import { USER_SET_INFO } from '../../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';
import Tip from '../../utils/tips';
import mpvuePicker from 'mpvue-picker';
import LixCell from '@/components/lix-cell';
const date = new Date();
const years = [];
const months = [];
const days = [];

for (let i = 0; i <= 120; i++) {
  years.push({ label: date.getFullYear() - i, value: date.getFullYear() - i });
}

for (let i = 1; i <= 12; i++) {
  const val = i < 10 ? '0' + i : i;
  months.push({ label: val, value: val });
}

for (let i = 1; i <= 31; i++) {
  const val = i < 10 ? '0' + i : i;
  days.push({ label: val, value: val });
}

export default {
  computed: {
    ...mapGetters('user', {
      name: 'realname'
    })
  },
  components: {
    mpvuePicker,
    LixCell
  },
  data() {
    return {
      timeData: '请选择',
      mode: 'selector',
      deepLength: 0, // 几级联动
      pickerValueDefault: [], // 初始化值
      pickerValueArray: [] // picker 数组值
    };
  },
  methods: {
    ...mapActions('user', {
      'changeUserInfo': USER_SET_INFO
    }),
    onChange(e) {
      console.log(e);
    },
    onCancel(e) {
      console.log(e);
    },
    onConfirm(e) {
      console.log(e);
      const value = e.label;
      console.log('日期选择数据');
      console.log(value);
      this.timeData = value;
    },
    showTimePicker() {
      this.pickerType = 'time';
      this.mode = 'multiSelector';
      this.pickerValueArray = [
        years,
        months,
        days
      ];
      this.$refs.mpvuePicker.show();
    },
    submit(e) {
      this.changeUserInfo({
        params: {'birthday': this.timeData},
        callback: function() {
          Tip.success('修改成功')
            .then(res => {
              wx.navigateBack();
            });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/edit";
</style>
